<template>
    <div class="main-container">
        <top-header :name="name"></top-header>
        <aside>
            <router-link v-for="d in navList" :key="d.path" :to="d.path">
                {{d.label}}
            </router-link>
        </aside>
        <main>
            <router-view />
        </main>
    </div>
</template>

<script>
import TopHeader from '../components/TopHeader.vue'
export default {
    components:{TopHeader},
    data(){
        return{
            navList:[{
                label:'系统概览',
                path:"/main/overview"
            }],
            name:'',

        }
    },
    created() {
        this.axios.get('/who').then(data=>{
            if(!data.code){
                this.name = data.data.name
            }
        })
        // const xhr = new XMLHttpRequest();
        // xhr.open("GET", "/equipment/who");
        // xhr.onreadystatechange = () => {
        //     if (xhr.readyState == 4 && xhr.status === 200) {
        //         console.log(xhr.statusText);
        //     }
        // };
        // xhr.send(null);
    }
};
</script>

<style lang="sass" scoped>
.main-container
    & > *
        position: fixed
        top: 0
        right: 0
        bottom: 0
        left: 0
    header
        bottom: auto
        height: 60px
        background: #0079c4
    aside
        width: 190px
        top: 60px
        right: auto
        background: #2c405a
        padding: 15px 10px
        a
            display: block
            color: #fff
            line-height: 42px
            padding: 0 15px
            border-radius: 4px
            font-size: 16px
            transition: .3s
            &.router-link-active
                background: #3f536e
    main
        top: 60px
        left: 190px
        overflow: auto

</style>
